<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天勤考核</title>
    <link rel="stylesheet" href="./css/index.min.css">
</head>

<body>
    <!-- header start -->
    <header>
        <div class="container">
            <div class="logo">LOGO</div>

            <ul class="top-right">
                <li>
                    <svg t="1670209744300" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="7546" width="200" height="200">
                        <path
                            d="M940 596l-76-57.6c0.8-8 1.6-16.8 1.6-26.4s-0.8-18.4-1.6-26.4l76-57.6c20.8-16 26.4-44 12.8-68l-84.8-143.2c-9.6-16.8-28-27.2-47.2-27.2-6.4 0-12 0.8-18.4 3.2L712 228c-15.2-10.4-31.2-19.2-47.2-26.4l-13.6-92c-4-26.4-26.4-45.6-53.6-45.6H426.4c-27.2 0-49.6 19.2-53.6 44.8L360 201.6c-16 7.2-31.2 16-47.2 26.4l-90.4-35.2c-6.4-2.4-12.8-3.2-19.2-3.2-19.2 0-37.6 9.6-46.4 26.4L71.2 360c-13.6 22.4-8 52 12.8 68l76 57.6c-0.8 9.6-1.6 18.4-1.6 26.4s0 16.8 1.6 26.4l-76 57.6c-20.8 16-26.4 44-12.8 68l84.8 143.2c9.6 16.8 28 27.2 47.2 27.2 6.4 0 12-0.8 18.4-3.2L312 796c15.2 10.4 31.2 19.2 47.2 26.4l13.6 92c3.2 25.6 26.4 45.6 53.6 45.6h171.2c27.2 0 49.6-19.2 53.6-44.8l13.6-92.8c16-7.2 31.2-16 47.2-26.4l90.4 35.2c6.4 2.4 12.8 3.2 19.2 3.2 19.2 0 37.6-9.6 46.4-26.4l85.6-144.8c12.8-23.2 7.2-51.2-13.6-67.2zM704 512c0 105.6-86.4 192-192 192S320 617.6 320 512s86.4-192 192-192 192 86.4 192 192z"
                            p-id="7547" fill="#515151"></path>
                    </svg>
                    <svg t="1670209805856" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="8668" width="200" height="200">
                        <path
                            d="M447.26667121 209.91325181V181.68035026c0-22.24731445 18.16864013-40.46892449 40.46892449-40.46892448 22.24731445 0 40.46892449 18.22161004 40.46892448 40.46892449v28.23290155c117.8577967 19.86367331 186.29477395 126.59781352 186.29477325 255.04956915v155.73120117l82.63288288 70.76764778c13.56026755 22.61810302 13.93105612 39.99219611 0.90048612 62.87514792-12.9776001 22.98889161-36.49618997 25.84926039-62.82217802 25.84926112H240.26070701c-26.32598877 0-49.84457864-2.86036881-62.87514793-25.74332132-12.9776001-22.88295181-12.60681153-40.36298468 0.90048685-62.87514792l1.4301844-2.11879237 80.67299949-68.7018253v-155.73120117c0-128.45175638 68.91370491-235.23886575 186.87744139-255.10253906zM555.11317642 802.32745362c0 37.23776712-30.19278421 80.4611206-67.43055061 80.4611206s-67.4305506-43.22335349-67.43055062-80.4611206H555.11317642z"
                            fill="#515151" p-id="8669"></path>
                    </svg>
                </li>

                <li>
                    Log Out
                </li>
            </ul>

        </div>
    </header>

    <!-- header end -->

    <!-- main section start -->
    <section class="main">
        <div class="container">
            <div class="top">
                <div>
                    <div>Audience Overview</div>
                    <span>Roseville,CA</span>
                </div>
                <nav>

                    <div class="toggle"><a href="#">DASHBOARD</a></div>
                    <div class="toggle"><a href="#">PROJECTS</a></div>
                    <div class="toggle"><a href="#">CALENDAR</a></div>
                    <div class="toggle"><a href="#">MAILBOX</a></div>
                    <div class="toggle"><a href="#">SETTINGS</a></div>

                </nav>
                <script src="./js/toggleClass.js"></script>
            </div>

            <div class="bottom">
                <div class="focus">
                    <!-- 左侧按钮 -->
                    <a href="javascript:;" class="arrow-l"> &lt; </a>
                    <!-- 右侧按钮 -->
                    <a href="javascript:;" class="arrow-r"> &gt; </a>
                    <!-- 核心的滚动区域 -->
                    <ul>
                        <li>
                            <a href="#"><img src="./images/1.jpg" alt=""></a>
                        </li>
                        <li>
                            <a href="#"><img src="./images/2.jpg" alt=""></a>
                        </li>
                        <li>
                            <a href="#"><img src="./images/3.jpg" alt=""></a>
                        </li>
                        <li>
                            <a href="#"><img src="./images/4.jpg" alt=""></a>
                        </li>
                        <li>
                            <a href="#"><img src="./images/5.jpg" alt=""></a>
                        </li>

                    </ul>
                    <!-- 小圆圈 -->
                    <ol class="circle">
                    </ol>
                </div>

                <article>
                    <div class="article-top">
                        <div class="little-container">
                            <div>Support Request</div>
                            <div>View All</div>
                        </div>
                    </div>

                    <div class="article-bottom">
                        <div class="bottom-container">
                            <div>
                                <ul>
                                    <li>
                                        <div><span>TIME</span></div>
                                        <div>9.45pm</div>
                                        <div>9.45pm</div>
                                    </li>
                                    <li>
                                        <div><span>USER NAME</span></div>
                                        <div>info@design.com</div>
                                        <div>info@design.com</div>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                <div><span>STATUS</span></div>
                                <div>solved</div>
                                <div>solved</div>
                            </div>
                        </div>
                    </div>
                </article>
            </div>

            <script src="./js/animate.js"></script>
            <script src="./js/focus.js"></script>
        </div>
    </section>
    <!-- main section end -->

    <footer>
        <div class="container">
            <ul>
                <li>
                    <div class="logo">LOGO</div>
                </li>

                <li>
                    <div>news</div>
                    <div>channels</div>
                    <div>overview</div>
                    <div>timeline</div>
                </li>
                <li>
                    <div>sport</div>
                    <div>culture</div>
                    <div>nature</div>
                    <div>music</div>
                </li>
                <li>
                    <div>weather</div>
                    <div>autos</div>
                    <div>local</div>
                    <div>shop</div>
                </li>
                <li>
                    <div>future</div>
                    <div>food</div>
                    <div>earth</div>
                    <div>tv</div>
                </li>
                <li>
                    <div>travel</div>
                    <div>radio</div>
                    <div></div>
                    <div></div>
                </li>
            </ul>
        </div>
    </footer>
</body>

</html>